<template>
  <a-layout class="layout">
    <!-- 左侧功能菜单区域 -->
    <SideMenu :primaryColor="primaryColor" :collapsed="collapsed" :fixSidebar="fixSidebar" :theme="navTheme" />
    <!-- 右侧展示区域 -->
    <a-layout class="sidemenu" :style="{ paddingLeft: contentPaddingLeft, minHeight: '100vh' }">
      <!-- 顶部内容 -->
      <GlobalHeader :primaryColor="primaryColor" :collapsed="collapsed" :fixedHeader="fixedHeader" @toggle="toggle" />
      <!-- 主要内容区 -->
      <a-layout-content :style="{ height: '100%', paddingTop: fixedHeader ? '64px' : '0' }">
        <!-- 主体内容 -->
        <div class="content">
          <router-view />
        </div>
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>

<script>
  import { mapState } from 'vuex'
  // import config from '@/config/defaultSettings'
  import GlobalHeader from '@/components/base/GlobalHeader'
  import SideMenu from '@/components/base/Menu/SideMenu'

  export default {
    name: 'BasicLayout',
    components: { GlobalHeader, SideMenu },
    data() {
      return {
        collapsed: false,
      }
    },
    computed: {
      ...mapState({
        navTheme: state => state.app.navTheme,
        fixSidebar: state => state.app.fixSidebar,
        fixedHeader: state => state.app.fixedHeader,
        primaryColor: state => state.app.primaryColor,
      }),
      contentPaddingLeft() {
        // console.log(this.fixSidebar)
        // console.log(this.collapsed)
        // return '0px'
        if (!this.fixSidebar) {
          return '0'
        }
        if (!this.collapsed) {
          return '256px'
        }
        return '80px'
      },
    },
    methods: {
      toggle() {
        this.collapsed = !this.collapsed
      },
    },
  }
</script>

<style scoped lang="less">
  .content {
    margin: 24px;
    .link {
      margin-top: 16px;
      &:not(:empty) {
        margin-bottom: 16px;
      }
      a {
        margin-right: 32px;
        height: 24px;
        line-height: 24px;
        display: inline-block;
        i {
          font-size: 24px;
          margin-right: 8px;
          vertical-align: middle;
        }
        span {
          height: 24px;
          line-height: 24px;
          display: inline-block;
          vertical-align: middle;
        }
      }
    }
  }
</style>
